<template>
  <div class="create-q">
    <n-button type="warning" @click="show" round v-if="!store.state.isCreate">
      <template #icon>
        <n-icon>
          <add />
        </n-icon>
      </template>
      新建问卷
    </n-button>
    <n-modal
      v-model:show="showModal"
      preset="card"
      title="新建问卷类型"
      :bordered="false"
      style="width: 40vw"
    >
      <n-grid :x-gap="15" :y-gap="10" :cols="3">
        <n-grid-item>
          <div class="card">
            <n-card @click="createQ(0)" :bordered="false" hoverable>
              <template #cover>
                <div style="padding: 1vw; width: 8rem; margin: 0 auto">
                  <img src="@images/icon/wj2.png" />
                </div>
              </template>
              <n-space justify="center" class="text"> 空白问卷 </n-space>
            </n-card>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="card">
            <n-card :bordered="false" @click="createQ(1)" hoverable>
              <template #cover>
                <div style="padding: 1vw; width: 8rem; margin: 0 auto">
                  <img src="@images/icon/ks2.png" />
                </div>
              </template>
              <n-space justify="center" class="text"> 考试 </n-space>
            </n-card>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="card">
            <n-card :bordered="false" @click="createQ(-1)" hoverable>
              <template #cover>
                <div style="padding: 1vw; width: 8rem; margin: 0 auto">
                  <img src="@images/icon/tp2.png" />
                </div>
              </template>
              <n-space justify="center" class="text"> 投票 </n-space>
            </n-card>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="card">
            <n-card :bordered="false" @click="createQ(-2)" hoverable>
              <template #cover>
                <div style="padding: 1vw; width: 8rem; margin: 0 auto">
                  <img src="@images/icon/bm2.png" />
                </div>
              </template>
              <n-space justify="center" class="text"> 报名 </n-space>
            </n-card>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="card">
            <n-card :bordered="false" @click="createQ(-3)" hoverable>
              <template #cover>
                <div style="padding: 1vw; width: 8rem; margin: 0 auto">
                  <img src="@images/icon/dk2.png" />
                </div>
              </template>
              <n-space justify="center" class="text"> 疫情打卡 </n-space>
            </n-card>
          </div>
        </n-grid-item>
      </n-grid>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Add } from '@vicons/ionicons5';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();

// 新建问卷
const showModal = ref(false);
const createQ = (index: Number) => {
  showModal.value = false;
  if (store.state.isCreate) {
    // router.push('/home');
    // router.push('/q/create/' + index.toString() + '/0');
  } else {
    router.replace('/q/create/' + index.toString() + '/0');
  }
};

const show = () => {
  if (!store.state.auth) {
    router.push('/login');
  } else {
    showModal.value = true;
  }
};
const handleNegativeClick = () => {};
</script>

<style scoped lang="scss">
.create-q {
  .card {
    cursor: pointer;
    width: 2vw;
  }
  width: 8rem;
}
.text {
  font-size: 1vw;
  font-weight: 600;
}
</style>
